import { useEffect } from 'react'
import dayjs from 'dayjs'
import { Button, Card, Col, Empty, Row, Space, Typography } from 'antd'
import {
  CheckCircleFilled,
  CloseCircleFilled,
  EyeInvisibleOutlined,
  EyeOutlined,
  MinusCircleFilled,
  PlusOutlined,
} from '@ant-design/icons'

import { IWaybillPublishPathRes } from '../../interface'
import { useBoundStore } from '../../store'
import { getLocationTypeName, useUrlParams } from '../../utils'
import styles from './styles.module.less'

const EventBadge = ({ status }: { status: 1 | 2 | 3 }) => {
  const statusMap = {
    1: '#52c41a',
    2: '#fadb14',
    3: '#f5222d',
  }

  return (
    <div className={styles.event_badge}>
      <div className={styles.event_badge_color} style={{ backgroundColor: statusMap[status] }} />
      <div className={styles.event_badge_line} />
    </div>
  )
}

const AuditIcon = ({ status }: { status: number | undefined }) => {
  if (status === 1) return <MinusCircleFilled style={{ color: '#c9c9c9' }} />
  if (status === 3) return <CheckCircleFilled style={{ color: '#52c41a' }} />
  if (status === 2) return <CloseCircleFilled style={{ color: '#f5222d' }} />
}

const EventItem = ({ item }: { item: IWaybillPublishPathRes }) => {
  return (
    <div className={styles.item}>
      <div className={styles.item_header}>
        <Typography.Text className={styles.item_title}>{item.templateCn}</Typography.Text>
        <Space size={12} className={styles.item_icons}>
          {item.visibleFlag ? (
            <EyeOutlined
              style={{
                color: '#1677ff',
              }}
            />
          ) : (
            <EyeInvisibleOutlined />
          )}
          <AuditIcon status={item.shipTrackStatus} />
        </Space>
      </div>
      <div className={styles.item_meta}>
        <Typography.Text className="small_print">
          {item.eventTime ? dayjs(item.eventTime).format($F_YMDHms) : ''}
        </Typography.Text>
        <Typography.Text className="small_print">•</Typography.Text>
        <Typography.Text strong className="small_print">
          {getLocationTypeName(item.locationType)}
        </Typography.Text>
      </div>
      <div className={styles.item_meta}>
        <Typography.Text className="small_print">{item.updateBy || ''}</Typography.Text>
        <Typography.Text strong className="small_print">
          更新时间：
        </Typography.Text>
        <Typography.Text className="small_print">
          {item.updateAt ? dayjs(item.updateAt).format($F_YMDHms) : ''}
        </Typography.Text>
      </div>
      <div className={styles.item_meta}>
        <Typography.Text strong className="small_print">
          同步时间：
        </Typography.Text>
        <Typography.Text className="small_print">
          {item.syncAt ? dayjs(item.syncAt).format($F_YMDHms) : ''}
        </Typography.Text>
      </div>
      {item.note ? (
        <div className={styles.item_note}>
          <Typography.Text className={styles.item_note_text}>{item.note}</Typography.Text>
        </div>
      ) : null}
    </div>
  )
}

export const EventInfo = () => {
  const { waybillNo } = useUrlParams()
  const waybillPublishPath = useBoundStore(state => state.waybillPublishPath)
  const getEventList = useBoundStore(state => state.getEventList)
  const openEventPopup = useBoundStore(state => state.openEventPopup)
  const detail = useBoundStore(state => state.detail)

  useEffect(() => {
    getEventList(waybillNo || '')
  }, [])

  return (
    <Card className={styles.card}>
      <div className={styles.box}>
        <div className={styles.box_title}>
          <Typography.Title level={5}>轨迹信息</Typography.Title>
          <Button
            disabled={[18, 19].includes(detail?.waybillStatus as number)}
            onClick={() => openEventPopup({})}
            type="default"
            icon={<PlusOutlined />}
            size="small"
          >
            添加轨迹
          </Button>
        </div>
        <div className={styles.box_content}>
          {waybillPublishPath.length ? null : <Empty />}
          {waybillPublishPath.map((v, i) => (
            <Row key={i} gutter={12}>
              <Col span={1}>
                <EventBadge status={v.messageType as 1 | 2 | 3} />
              </Col>
              <Col span={23}>
                <EventItem item={v} />
              </Col>
            </Row>
          ))}
        </div>
      </div>
    </Card>
  )
}
